<template>
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">桥长、跨径与技术状况等级</h3>
            </div>
            <div class="box-body">
              <div id="spanLengthLevelCharts" style="height: 320px;"></div>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">服役时间与技术状况等级</h3>
            </div>
            <div class="box-body">
              <div id="ageLevelCharts" style="height: 320px;"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">桥梁</h3>
            </div>
            <div class="box-body">
              <div id="bridgeMapCharts" style="height: 400px;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "../../../echarts/extension/bmap/bmap";
  import echarts from "../../../echarts"
  import {doGet} from "../../../assets/js/utils/RequestUtils";
  import {getSpanLengthLevelChartsOption, getAgeLevelChartsOption, getMapLevelChartsOption} from "../../../assets/js/utils/ViewUtils"

  const SPAN_LENGTH_LEVEL_URL = "/stat/bridgeLevelRel/getSpanLengthLevelRel";
  const AGE_LEVEL_URL = "/stat/bridgeLevelRel/getAgeLevelRel";
  const MAP_LEVEL_URL = "/stat/bridgeLevelRel/getMapLevelRel";

  export default {
    name:"BridgeLevelRel",
    data() {
      return {
        spanLengthLevelCharts:null,
        ageLevelCharts:null,
        bridgeMapCharts:null
      }
    },
    methods:{
      initCharts() {
        this.spanLengthLevelCharts = echarts.init(document.getElementById("spanLengthLevelCharts"));
        this.ageLevelCharts = echarts.init(document.getElementById("ageLevelCharts"));
        this.bridgeMapCharts = echarts.init(document.getElementById("bridgeMapCharts"));
      },
      fetchData() {
        //第一张图表
        this.spanLengthLevelCharts.showLoading();
        doGet(SPAN_LENGTH_LEVEL_URL, {component:this})
          .then(response=> this.spanLengthLevelCharts.setOption(getSpanLengthLevelChartsOption(response)))
          .finally(()=>this.spanLengthLevelCharts.hideLoading());
        //第二张图表
        this.ageLevelCharts.showLoading();
        doGet(AGE_LEVEL_URL, {component:this})
          .then(response=>this.ageLevelCharts.setOption(getAgeLevelChartsOption(response)))
          .finally(()=>this.ageLevelCharts.hideLoading());
        //第三张图表
        this.bridgeMapCharts.showLoading();
        doGet(MAP_LEVEL_URL, {component:this})
          .then(response=>this.bridgeMapCharts.setOption(getMapLevelChartsOption(response)))
          .finally(()=>this.bridgeMapCharts.hideLoading());
      }
    },
    mounted() {
      this.initCharts();
      this.fetchData();
    }
  }
</script>



// WEBPACK FOOTER //
// BridgeLevelRel.vue?5f3890e6
